<template>
  <a-form ref="formInstance" :model="apiData" layout="vertical" :rules="rules">
    <a-row :gutter="gutter">
      <a-col :span="12">
        <a-form-item label="Name" name="ContactName">
          <a-input v-model:value="apiData.ContactName" />
        </a-form-item>
      </a-col>
      <a-col :span="12">
        <a-form-item label="Gender" name="Gender">
          <a-select v-model:value="apiData.Gender" :get-popup-container="triggerNode => triggerNode.parentNode">
            <a-select-option v-for="item in dict.genders" :key="item.value">
              {{ item.text }}
            </a-select-option>
          </a-select>
        </a-form-item>
      </a-col>
    </a-row>
    <a-row :gutter="gutter">
      <a-col :span="12">
        <a-form-item label="Mobile Phone" name="CellPhone">
          <a-input v-model:value="apiData.CellPhone" />
        </a-form-item>
      </a-col>
      <a-col :span="12">
        <a-form-item label="Office Phone" name="OfficePhone">
          <a-input v-model:value="apiData.OfficePhone" />
        </a-form-item>
      </a-col>
    </a-row>
    <a-row :gutter="gutter">
      <a-col :span="12">
        <a-form-item label="E-mail" name="Email">
          <a-input v-model:value="apiData.Email" />
        </a-form-item>
      </a-col>
      <a-col :span="12">
        <a-form-item label="Country/Region" name="CountryID">
          <e-country-region-select v-model="CountryIDWrapped" :allow-clear="true" />
        </a-form-item>
      </a-col>
    </a-row>
    <a-row :gutter="gutter">
      <a-col :span="12">
        <a-form-item label="Type" name="ContactType">
          <a-select v-model:value="apiData.ContactType" :get-popup-container="triggerNode => triggerNode.parentNode">
            <a-select-option v-for="item in dict.contactTypes" :key="item.value">
              {{ item.text }}
            </a-select-option>
          </a-select>
        </a-form-item>
      </a-col>
      <a-col :span="12">
        <a-form-item label="City/State" name="City">
          <a-input v-model:value="apiData.City" name />
        </a-form-item>
      </a-col>
    </a-row>
    <a-row :gutter="gutter">
      <a-col :span="12">
        <a-form-item label="Title" name="Title">
          <a-input v-model:value="apiData.Title" />
        </a-form-item>
      </a-col>
      <a-col :span="12">
        <a-form-item label="Zip Code" name="PostalCode">
          <a-input v-model:value="apiData.PostalCode" />
        </a-form-item>
      </a-col>
    </a-row>
    <a-row :gutter="gutter">
      <a-col :span="12">
        <a-form-item label="Department" name="Department">
          <a-input v-model:value="apiData.Department" />
        </a-form-item>
      </a-col>
      <a-col :span="12">
        <a-form-item label="Address" name="Address">
          <a-input v-model:value="apiData.Address" />
        </a-form-item>
      </a-col>
    </a-row>
    <a-row :gutter="gutter">
      <a-col :span="12">
        <a-form-item label="Preferred IM" name="IM">
          <a-select v-model:value="IMWrapped" allow-clear :get-popup-container="triggerNode => triggerNode.parentNode">
            <a-select-option v-for="item in dict.IMTypes" :key="item.value">
              {{ item.text }}
            </a-select-option>
          </a-select>
        </a-form-item>
      </a-col>
      <a-col :span="12">
        <a-form-item label="Preferred IM's Account" name="IMAccount">
          <a-input v-model:value="apiData.IMAccount" />
        </a-form-item>
      </a-col>
    </a-row>
    <a-row :gutter="gutter">
      <a-col :span="24">
        <a-form-item label="Hobbies" name="Hobbies">
          <a-input v-model:value="apiData.Hobbies" />
        </a-form-item>
      </a-col>
    </a-row>
    <a-row :gutter="gutter">
      <a-col :span="24">
        <a-form-item label="Personality" name="Personality">
          <a-input v-model:value="apiData.Personality" />
        </a-form-item>
      </a-col>
    </a-row>
    <a-row :gutter="gutter">
      <a-col :span="24">
        <a-form-item label="Remark" name="Comment">
          <a-textarea v-model:value="apiData.Comment" :auto-size="{ minRows: 4, maxRows: 4 }" />
        </a-form-item>
      </a-col>
    </a-row>
  </a-form>
</template>

<script setup>
import { ref, reactive, computed } from 'vue'
import { useStore } from 'vuex'
import ECountryRegionSelect from '@/components/ECountryRegionSelect.vue'
import { useDictNullValue } from '@/hooks/useDictNullValue.js'
const gutter = [120, 16]
const formInstance = ref(null)
const apiData = reactive({
  // 联系人名称（Name）
  ContactName: '',
  // 联系性别（Gender）
  Gender: 0,
  // 个人电话（Mobile Phone）
  CellPhone: '',
  // 办公电话（Office Phone）
  OfficePhone: '',
  // 电子邮箱（E-mail）
  Email: '',
  // 联系人类型（Type）
  ContactType: '',
  // 国家或地区（Country/Region）
  CountryID: 0,
  // 联系人职务（Title）
  Title: '',
  // 所在城市（City/State）
  City: '',
  // 邮编（Zip Code）
  PostalCode: '',
  // 联系人部门（Department）
  Department: '',
  // 即时通讯类型（Preferred IM）
  IM: 0,
  // 即时通讯账号（Preferred IM）
  IMAccount: '',
  // 爱好（Hobbies）
  Hobbies: '',
  // 性格（Personality）
  Personality: '',
  // 地址（Address）
  Address: '',
  // 备注（Remark）
  Comment: ''
})
const CountryIDWrapped = useDictNullValue(apiData, 'CountryID')
const IMWrapped = useDictNullValue(apiData, 'IM')
const store = useStore()
const dict = ref(computed(() => store.state.dict))
store.dispatch('dict/getContactTypes').then(() => {
  if (dict.value.contactTypes.length > 0) apiData.ContactType = dict.value.contactTypes[0].value
})
store.dispatch('dict/getIMTypes')
const rules = {
  ContactName: [
    {
      required: true,
      whitespace: true,
      message: 'Please input Name',
      trigger: 'blur'
    }
  ],
  Email: [
    {
      required: true,
      whitespace: true,
      message: 'Please input E-mail',
      trigger: 'blur'
    },
    {
      type: 'email',
      message: 'Incorrect email address format',
      trigger: 'blur'
    },
    {
      validator: (rule, value) => {
        const regex = /@(ecinnovations)\./g
        return regex.test(value) ? Promise.reject(new Error()) : Promise.resolve()
      },
      message: 'Incorrect email suffix',
      trigger: 'blur'
    }
  ],
  ContactType: [
    {
      type: 'number',
      required: true,
      message: 'Please select the type',
      trigger: 'blur'
    }
  ]
}
defineExpose({ formInstance, apiData })
</script>

<style scoped></style>
